```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx代理配置指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            border-radius: 8px;
            position: relative;
        }
        .code-block::before {
            content: "";
            position: absolute;
            top: 12px;
            left: 12px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ff5f56;
            box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .mermaid {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col items-center text-center">
                <i class="fas fa-server text-5xl mb-6 opacity-90"></i>
                <h1 class="text-4xl md:text-5xl font-bold mb-4">Nginx代理配置全指南</h1>
                <p class="text-xl md:text-2xl opacity-90 max-w-3xl">掌握正向代理与反向代理的核心差异及高级配置技巧</p>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <p class="text-lg leading-relaxed mb-6">
                Nginx 作为高性能的 Web 服务器和反向代理服务器，在现代 Web 架构中扮演着至关重要的角色。理解正向代理和反向代理的区别及其配置方法，是构建高效、安全网络服务的基础。
            </p>
        </section>

        <!-- Proxy Comparison -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-2">正向代理 vs 反向代理</h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <!-- Forward Proxy Card -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-arrow-right-to-bracket text-2xl text-blue-600 mr-3"></i>
                        <h3 class="text-2xl font-bold text-gray-800">正向代理</h3>
                    </div>
                    <p class="text-gray-700 mb-4"><strong>定义：</strong>正向代理是客户端使用代理服务器访问互联网的一种方式。客户端将请求发送到代理服务器，然后由代理服务器转发到目标服务器，并将目标服务器的响应返回给客户端。</p>
                    <div class="bg-blue-50 p-4 rounded-lg mb-4">
                        <h4 class="font-bold text-blue-700 mb-2 flex items-center">
                            <i class="fas fa-bullseye mr-2"></i>主要作用
                        </h4>
                        <ul class="list-disc pl-5 text-gray-700">
                            <li class="mb-1">隐藏客户端的真实 IP 地址</li>
                            <li class="mb-1">绕过地理限制</li>
                            <li class="mb-1">缓存请求</li>
                            <li>进行访问控制</li>
                        </ul>
                    </div>
                    <div class="bg-blue-50 p-4 rounded-lg">
                        <h4 class="font-bold text-blue-700 mb-2 flex items-center">
                            <i class="fas fa-laptop-code mr-2"></i>使用场景
                        </h4>
                        <p class="text-gray-700">常用于内部网络环境中，访问外部互联网资源。</p>
                    </div>
                </div>

                <!-- Reverse Proxy Card -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-arrow-right-from-bracket text-2xl text-purple-600 mr-3"></i>
                        <h3 class="text-2xl font-bold text-gray-800">反向代理</h3>
                    </div>
                    <p class="text-gray-700 mb-4"><strong>定义：</strong>反向代理是服务器端使用代理服务器处理客户端请求的一种方式。客户端的请求首先到达代理服务器，由代理服务器将请求转发到实际的后台服务器，并将后台服务器的响应返回给客户端。</p>
                    <div class="bg-purple-50 p-4 rounded-lg mb-4">
                        <h4 class="font-bold text-purple-700 mb-2 flex items-center">
                            <i class="fas fa-bullseye mr-2"></i>主要作用
                        </h4>
                        <ul class="list-disc pl-5 text-gray-700">
                            <li class="mb-1">隐藏真实服务器的 IP 地址</li>
                            <li class="mb-1">负载均衡</li>
                            <li class="mb-1">SSL 终端</li>
                            <li>缓存静态内容</li>
                        </ul>
                    </div>
                    <div class="bg-purple-50 p-4 rounded-lg">
                        <h4 class="font-bold text-purple-700 mb-2 flex items-center">
                            <i class="fas fa-laptop-code mr-2"></i>使用场景
                        </h4>
                        <p class="text-gray-700">常用于互联网环境中，提供对内部服务器的统一访问入口。</p>
                    </div>
                </div>
            </div>

            <!-- Visualization -->
            <div class="mermaid">
                graph LR
                    A[客户端] -->|正向代理| B[代理服务器]
                    B --> C[目标服务器]
                    D[客户端] -->|反向代理| E[代理服务器]
                    E --> F[后台服务器集群]
            </div>
        </section>

        <!-- Nginx Configuration -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-2">Nginx 反向代理配置指南</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-4 text-gray-700 flex items-center">
                    <i class="fas fa-cog mr-2 text-blue-500"></i>基本配置
                </h3>
                <p class="text-gray-700 mb-6">以下是一个基础的 Nginx 反向代理配置示例，展示了如何使用 <code class="bg-gray-100 px-1 rounded">proxy_pass</code> 指令实现反向代理功能。</p>
                
                <div class="code-block p-4 mb-6">
                    <pre class="text-gray-200 overflow-x-auto"><code>server {
    listen 80;
    server_name toString.com;

    location / {
        # 反向代理的目标服务器地址
        proxy_pass http://backend_server;
        
        # 设定请求头部
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # Optional: 设置代理超时
        proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;
        send_timeout 300;
    }
}</code></pre>
                </div>
                
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h4 class="font-bold text-blue-700 mb-2 flex items-center">
                        <i class="fas fa-info-circle mr-2"></i>配置说明
                    </h4>
                    <ul class="list-disc pl-5 text-gray-700">
                        <li class="mb-1"><code>proxy_pass</code>：指定目标服务器地址（可以是IP或域名）</li>
                        <li class="mb-1"><code>proxy_set_header</code>：设置转发到目标服务器的请求头</li>
                        <li>超时设置：控制与目标服务器的连接超时时间</li>
                    </ul>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-4 text-gray-700 flex items-center">
                    <i class="fas fa-tasks mr-2 text-purple-500"></i>负载均衡配置
                </h3>
                <p class="text-gray-700 mb-6">Nginx 可以轻松配置为负载均衡器，将请求分发到多个后端服务器。</p>
                
                <div class="code-block p-4 mb-6">
                    <pre class="text-gray-200 overflow-x-auto"><code>upstream backend {
    server backend1.toString.com;
    server backend2.toString.com;
}

server {
    listen 80;
    server_name example.com;

    location / {
        proxy_pass http://backend;
        # 其他代理配置
    }
}</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-bold mb-4 text-gray-700 flex items-center">
                    <i class="fas fa-lock mr-2 text-green-500"></i>SSL终端配置
                </h3>
                <p class="text-gray-700 mb-6">在Nginx上终止SSL连接，将HTTPS请求解密后转发到HTTP后端。</p>
                
                <div class="code-block p-4 mb-6">
                    <pre class="text-gray-200 overflow-x-auto"><code>server {
    listen 443 ssl;
    server_name toString.com;

    ssl_certificate /etc/nginx/ssl/toString.com.crt;
    ssl_certificate_key /etc/nginx/ssl/toString.com.key;

    location / {
        proxy_pass http://backend_server;
        # 其他代理配置
    }
}</code></pre>
                </div>
            </div>
            
            <div>
                <h3 class="text-2xl font-bold mb-4 text-gray-700 flex items-center">
                    <i class="fas fa-database mr-2 text-yellow-500"></i>缓存配置
                </h3>
                <p class="text-gray-700 mb-6">通过配置缓存减少后台服务器负载并加快响应速度。</p>
                
                <div class="code-block p-4 mb-6">
                    <pre class="text-gray-200 overflow-x-auto"><code>location / {
    proxy_pass http://backend_server;
    proxy_cache my_cache;
    proxy_cache_valid 200 1h;
    proxy_cache_valid 404 1m;
}

proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=my_cache:10m max_size=1g;</code></pre>
                </div>
            </div>
        </section>
        
        <!-- Configuration Steps -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b pb-2">配置步骤</h2>
            
            <div class="bg-white rounded-lg shadow-sm p-6">
                <ol class="list-decimal pl-5 space-y-4">
                    <li class="pl-2">
                        <span class="font-bold">安装和启动 Nginx</span>
                        <p class="text-gray-700 mt-1">确保 Nginx 已安装并正在运行。</p>
                    </li>
                    <li class="pl-2">
                        <span class="font-bold">编辑 Nginx 配置文件</span>
                        <p class="text-gray-700 mt-1">配置文件通常位于 <code class="bg-gray-100 px-1 rounded">/etc/nginx/nginx.conf</code> 或 <code class="bg-gray-100 px-1 rounded">/etc/nginx/sites-available/default</code>。</p>
                    </li>
                    <li class="pl-2">
                        <span class="font-bold">测试配置文件</span>
                        <p class="text-gray-700 mt-1">使用 <code class="bg-gray-100 px-1 rounded">nginx -t</code> 命令测试配置文件的正确性。</p>
                        <div class="code-block p-4 mt-2">
                            <pre class="text-gray-200 overflow-x-auto"><code>sudo nginx -t</code></pre>
                        </div>
                    </li>
                    <li class="pl-2">
                        <span class="font-bold">重新加载 Nginx 配置</span>
                        <p class="text-gray-700 mt-1">如果配置文件没有错误，重新加载 Nginx 使配置生效。</p>
                        <div class="code-block p-4 mt-2">
                            <pre class="text-gray-200 overflow-x-auto"><code>sudo systemctl reload nginx</code></pre>
                        </div>
                    </li>
                </ol>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                    <p class="text-gray-400 mt-1">探索技术之美</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition-colors duration-200">
                        <i class="fas fa-link mr-1"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```